<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.commandName' prop='commandName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.commandName' clearable
						:placeholder='prompt?.commandName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.commandAlias' prop='commandAlias'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.commandAlias' clearable
						:placeholder='prompt?.commandAlias'
						:formatter="(value) => value.replace(NAME_REG.inputFormat, '')"
						:parser="(value) => value.replace(NAME_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.paramType' prop='paramType'>
					<el-radio-group v-model='formInline.paramType'>
						<el-radio v-for="item in CONTROL_COMMAND_TYPE" :key="item.value" :value="item.value">
							{{ isNullOrEmpty(item.label) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.hasConfig' prop='hasConfig'>
					<el-radio-group v-model='formInline.hasConfig'>
						<el-radio v-for="item in IS_READ_CONFIG" :key="item.value" :value="item.value">
							{{ isNullOrEmpty(item.label) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if="formInline.paramType === 1">
				<el-form-item :label='titles?.value1' prop='value1'>
					<el-input v-model.trim='formInline.value1' clearable :placeholder='prompt?.value1' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if="formInline.paramType === 2">
				<el-form-item :label='titles?.value2' prop='value2'>
					<el-input v-model="formInline.value2[0]" type="number" style="width: 100px;" placeholder="请输入"
						clearable />
					<el-icon class="mx-[10px]">
						<SemiSelect />
					</el-icon>
					<el-input v-model="formInline.value2[1]" type="number" style="width: 100px;" placeholder="请输入"
						clearable />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if="formInline.paramType === 3">
				<el-form-item :label='titles?.value3' prop='value3'>
					<el-tag class="mr-[5px]" v-for="tag in formInline.value3" :key="tag" closable
						:disable-transitions="false" @close="handleClose(tag)">
						{{ tag.key }} : {{ tag.value }}
					</el-tag>
					<el-input v-model.trim="inputValue1" placeholder="请输入键名" style="width: 100px;" v-if="inputVisible"
						@keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
					<el-text class="!mx-[5px]" v-if="inputVisible">:</el-text>
					<el-input v-model.trim="inputValue2" placeholder="请输入键值" style="width: 100px;" v-if="inputVisible"
						@keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
					<el-button v-else class="button-new-tag  " size="small" @click="showInput">
						添加
					</el-button>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.remark'
						:autosize="{ minRows: 4 }" type="textarea" clearable :placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import { ElInput } from 'element-plus'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/product-management/product-type/control-command/index';
import { CONTROL_COMMAND_TYPE, IS_READ_CONFIG } from '@/constant/product-management'
import { SemiSelect } from '@element-plus/icons-vue';
import { NAME_REG } from '@/constant/index'

type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	productId: [{ required: true, message: prompt?.productId, trigger: 'blur' },],
	commandName: [{ required: true, message: prompt?.commandName, trigger: 'blur' },],
	commandAlias: [
		{ required: true, message: prompt?.commandAlias, trigger: 'blur' },
		{ pattern: NAME_REG.role, message: NAME_REG.text, trigger: 'blur' },
	],
	hasConfig: [{ required: true, message: prompt?.hasConfig, trigger: 'blur' },],
	paramType: [{ required: true, message: prompt?.paramType, trigger: 'blur' },],
	value1: [{ required: true, message: prompt?.value1, trigger: 'blur' },],
	value2: [{ required: true, message: prompt?.value2, trigger: 'blur' },],
	value3: [{ required: true, message: prompt?.value3, trigger: 'blur' },],
});
const ruleFormRef = ref();
const inputValue1 = ref('')
const inputValue2 = ref('')
const inputVisible = ref(false)
const handleClose = (tag: string) => { //关闭 Tag 时触发的事件
	props.formInline.value3.splice(props.formInline.value3.indexOf(tag), 1)
}
const showInput = () => { //点击 Tag 时触发的事件
	inputVisible.value = true
}

const handleInputConfirm = () => {

	if (inputValue1.value && inputValue2.value) {
		if (props.formInline.value3) {
			props.formInline.value3.push({ key: inputValue1.value, value: inputValue2.value })
		} else {
			props.formInline.value3 = [{ key: inputValue1.value, value: inputValue2.value }]
		}
		inputVisible.value = false
		inputValue1.value = ''
		inputValue2.value = ''
	}

}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
